<template>
	<view class="">
		<u-navbar title="代理结算" placeholder leftIconColor="#ffffff" :titleStyle="{color:'#ffffff'}" autoBack bgColor="#c1282e">
			<view class="flexright xiaobai" slot="right" @click="chengyuangl">成员管理</view>
		</u-navbar>
		<u-sticky>
			<view class="mainpadding ffffff flexbetween" @click="zshijian">
				<view class="xiaohei main_size">筛选开始时间</view>
				<view class="flexright">
					<view class="margin_right3 xiaohei main_size">{{startime}}</view>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
			<view class="mainpadding ffffff flexbetween" @click="yshijian">
				<view class="xiaohei main_size">筛选结束时间</view>
				<view class="flexright">
					<view class="margin_right3 xiaohei main_size">{{endtime}}</view>
					<u-icon name="arrow-right" color="#333" size="16"></u-icon>
				</view>
			</view>
		</u-sticky>
		<view class="mainpadding2" style="padding-bottom: 150rpx;">
			<view class="mainpadding_top ffffff xiaohong main_size" v-show="tabsid==1">
				总和：{{userinfo.total_price}}
			</view>
			<view class="mainpadding_top ffffff xiaohong main_size" v-show="tabsid==2">
				总和：{{userinfo.total_price1}}
			</view>
			<view class="ffffff">
				<u-tabs :list="list1" :scrollable="false" lineColor="#c1282e" @click="changetab" 
					:activeStyle="{
					    color: '#000000',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					            color: '#666666',
								fontWeight: '500',
					            transform: 'scale(1)'
					        }" itemStyle="height: 44px;"></u-tabs>
			</view>
			<view class="ffffff mainpadding_top radius" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="xiaohei titletext">姓名：{{item.user.username}}</view>
					<view class="xiaohei titletext">岗位：{{item.gangwei.name}}</view>
				</view>
				<view class="xiaohei titletext margin_top">就职企业：{{item.company.name}}</view>
				<view class="flexbetween margin_top">
					<view class="xiaohei titletext">金额：{{item.price}}</view>
					<view class="xiaohei titletext">是否在职：{{item.user.is_lz==0?'是':"否"}}</view>
				</view>
				<view class="xiaohei titletext margin_top">{{item.name}}</view>
				<view class="xiaohei titletext margin_top">备注:{{item.bz}}</view>
			</view>
			<view class="posibottom mainpadding" v-if="tabsid==1">
				<view class="submitbtn" @click="modal.modalShow=true">确认</view>
			</view>
		</view>
		<!-- <timePicker :messageTime="messageTime" @timeConfirm="timeConfirm"></timePicker> -->
		<u-datetime-picker :show="zshow" @confirm="zconfirm" v-model="value1" mode="date"
			@cancel="zshow= false"></u-datetime-picker>
		<u-datetime-picker :show="yshow" @confirm="yconfirm" v-model="value2" mode="date" @cancel="yshow= false"
			:minDate="minDate"></u-datetime-picker>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				userinfo: {},
				list1: [{
						name: '代理结算',
						value: 1,
					},
					{
						name: '结算明细',
						value: 2,
					}
				],
				tabsid: 1,
				messageTime: {
					timeShow: false,
					title: "选择年月",
					mode: "year-month", //date日期，datetime年月日时分秒，time时间，year-month年月
					minDate: "0" //最小时间
				},
				modal: {
					modalShow: false,
					title: "是否确认结算？",
				},
				month: "",
				// 时间
				startime: "",
				endtime: "",
				minDate: "",
				//开始时间
				zshow: false,
				value1: Number(new Date()),
				//结束
				yshow: false,
				value2: Number(new Date()),
			}
		},
		onLoad() {
			let that = this
			uni.setNavigationBarRightButton({
			      text: '成员管理',
			    });
			this.init()
			this.user()
		},
		
		methods: {
			chengyuangl() {
				uni.navigateTo({
					url: '/pages/tab4/tianjiacy'
				})
			},
			// 开始时间
			zconfirm(e) {
				console.log(e)
				this.selecttime = ""
				this.minDate = e.value
				this.startime = this.date(e.value)
				this.zshow = false
				this.init()
			},
			zshijian() {
				this.zshow = true
			},
			//结束时间
			yconfirm(e) {
				console.log(e)
				this.selecttime = ""
				this.endtime = this.date(e.value)
				this.yshow = false
				this.init()
			},
			yshijian() {
				if (this.minDate == "") {
					httpRequest.toast("请选择开始时间")
					return
				}
				this.yshow = true
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			modalSure() {
				if (this.modal.title == "是否确认结算？") {
					this.sureFn()
				}
				this.modalcancel()
			},
			modalcancel() {
				this.modal.modalShow = false
			},
			timeConfirm(e) {
				this.month = e
				this.init()
			},
			changetab(e) {
				this.tabsid = e.value
				this.init()
			},
			sureFn() {
				httpRequest.request('/api/user/sureDljs', 'GET', {}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			user() {
				httpRequest.request('/api/user/getUerInfo', 'GET', {}, false, false, true).then(res => {
					this.userinfo = res.data
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/user/dljsIndex', 'GET', {
					page: page || 1,
					limit: _this.limit,
					state: this.tabsid,
					start_time: this.startime,
					end_time: this.endtime
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>

</style>